npm<template>
	<el-config-provider :locale="zhCn">
		<App v-if="isLogin" />
		<Login v-else />
	</el-config-provider>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import App from './components/App.vue';
	import { ElConfigProvider } from 'element-plus';
	import zhCn from 'element-plus/es/locale/lang/zh-cn';
	import Login from './views/login/login.vue';
	import cookie from 'js-cookie';
	const isLogin = ref(cookie.get('token'));
</script>
<style>
	input::-webkit-inner-spin-button {
		-webkit-appearance: none !important;

	}

	input::-webkit-outer-spin-button {
		-webkit-appearance: none !important;

	}

	input[type="number"] {
		-moz-appearance: textfield;

	}

	/* WebKit (Safari/Chrome) */
	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
		/* Optional - if you don't want a gap at all */
	}

	/* Firefox */
	input[type="number"] {
		-moz-appearance: textfield;
	}
</style>
<style lang="scss">
	@import './assets/css/animate.css';

	body,
	html {
		width: 100%;
		height: 100%;
	}

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		width: 100%;
		height: 100%;
		color: rgba(0, 0, 0, 0.65);
		font-size: 14px;
		font-family: -apple-system, BlinkMacSystemFont, 'Apple Color Emoji', Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif;
		font-variant: tabular-nums;
		line-height: 1.5715;
		background-color: #f8f9fa;
		font-feature-settings: 'tnum';
		overflow: hidden;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	.circular {
		display: inline;
		height: 30px;
		width: 30px;
		animation: loading-rotate 2s linear infinite;
	}
	
	.path {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		stroke-width: 2;
		stroke: var(--el-color-primary);
		stroke-linecap: round;
	}
	
	.loading-path .dot1 {
		transform: translate(3.75px, 3.75px);
		fill: var(--el-color-primary);
		animation: custom-spin-move 1s infinite linear alternate;
		opacity: 0.3;
	}
	
	.loading-path .dot2 {
		transform: translate(calc(100% - 3.75px), 3.75px);
		fill: var(--el-color-primary);
		animation: custom-spin-move 1s infinite linear alternate;
		opacity: 0.3;
		animation-delay: 0.4s;
	}
	
	.loading-path .dot3 {
		transform: translate(3.75px, calc(100% - 3.75px));
		fill: var(--el-color-primary);
		animation: custom-spin-move 1s infinite linear alternate;
		opacity: 0.3;
		animation-delay: 1.2s;
	}
	
	.loading-path .dot4 {
		transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
		fill: var(--el-color-primary);
		animation: custom-spin-move 1s infinite linear alternate;
		opacity: 0.3;
		animation-delay: 0.8s;
	}
	
	@keyframes loading-rotate {
		to {
			transform: rotate(360deg);
		}
	}
	
	@keyframes loading-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}
	
		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}
	
		100% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}
	
	@keyframes custom-spin-move {
		to {
			opacity: 1;
		}
	}
</style>